<template>
  <view>
    <nav-bar :page-title="lang.pageTitle"/>
    <view class="padding-30">
      <!-- باش قىسىم -->
      <view class="center margin-bottom-60">
        <text class="text-40">{{ lang.title }}</text>
      </view>

      <!-- ھۆججەت تاللاش -->
      <view v-if="!selectedFile" class="center gap-40 upload-box" @click="selectFile">
        <image src="/static/upload/upload.svg" class="upload-icon"/>
        <view class="upload-text">{{ lang.selectFile }}</view>
        <view class="supported-formats">
          {{ lang.supportedFormats }}
        </view>
      </view>

      <view v-else class="card flex-between selected-file">
        <view class="flex-center gap-20" style="width: 70%;">
          <view :class="['padding-30 radio-20 center type', getTypeImage(selectedFile.name)]">
            <image :src="`/static/ext/${getTypeImage(selectedFile.name)}.svg`"
                   style="width: 108rpx; height: 108rpx;"/>
          </view>
          <view class="text-to text-32">{{ selectedFile.name }}</view>
        </view>
        <view class="column-center gap-20">
          <button class="btn delete" @click="removeFile">{{ lang.delete }}</button>
        </view>
      </view>

      <!-- نەتىجە -->
      <view v-if="result" class="result-card">
        <view class="center result-header">
          <text class="text-32 color-white">{{ lang.convertComplete }}</text>
        </view>

        <view class="result-content">
          <view class="flex-between result-item">
            <view class="text-32 color-dark-grey">{{ lang.pageCount }}</view>
            <view class="result-item-value text-color">{{ result.page_count }} {{ otherLang.page }}</view>
          </view>

          <view class="flex-between gap-20 margin-top-30">
            <view class="color-white radio-30 center action-btn preview" @click="previewFile">
              {{ lang.preview }}
            </view>
            <view class="color-white radio-30 center action-btn share" @click="shareFile">
              {{ lang.share }}
            </view>
            <view class="color-white radio-30 center action-btn download" @click="downloadFile">
              {{ lang.download }}
            </view>
          </view>
        </view>
      </view>

      <!-- مۇقىملاشتۇرۇش كۇنۇپكىسى -->
      <view class="padding-30 footer">
        <button class="submit-btn" :disabled="!selectedFile" @click="handleAction">
          {{ isConverted ? lang.selectNewFile : lang.startConvert }}
        </button>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import NavBar from "@/components/nav-bar/nav-bar.vue";
import tips from "@/utils/tips";
import {convert2pdfUrl} from "@/services/office";
import {getTypeImage} from "@/utils/utils";

export default {
  components: {NavBar},
  data() {
    return {
      selectedFile: null,
      result: null,
      isConverted: false,
      supportedFormats: ['.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx']
    }
  },

  computed: {
    lang() {
      return this.$t('toolBox.convert2pdf')
    },
  },

  methods: {
    getTypeImage,
    selectFile() {
      uni.chooseMessageFile({
        count: 1,
        type: 'file',
        extension: this.supportedFormats,
        success: (res) => {
          const {path, name} = res.tempFiles[0]
          this.selectedFile = {path, name}
        }
      })
    },

    removeFile() {
      this.selectedFile = null
      this.result = null
      this.isConverted = false
    },

    handleAction() {
      if (this.isConverted) {
        this.removeFile()
      } else {
        this.handleSubmit()
      }
    },

    handleSubmit() {
      uni.showLoading({title: this.lang.processing})
      uni.uploadFile({
        url: convert2pdfUrl,
        filePath: this.selectedFile.path,
        name: 'file',
        success: (res) => {
          const {data} = JSON.parse(res.data)
          this.result = data
          this.isConverted = true
          tips.toast(this.lang.convertSuccess)
        },
        fail: () => {
          tips.toast(this.lang.convertFailed)
        },
        complete: () => {
          uni.hideLoading()
        }
      })
    },

    previewFile() {
      uni.downloadFile({
        url: this.result.url,
        success: (res) => {
          if (res.statusCode === 200) {
            uni.openDocument({
              filePath: res.tempFilePath,
              fileType: 'pdf',
              success: () => {
                console.log('ھۆججەت ئېچىلدى')
              }
            })
          }
        }
      })
    },

    downloadFile() {
      uni.downloadFile({
        url: this.result.url,
        success: (res) => {
          if (res.statusCode === 200) {
            uni.openDocument({
              filePath: res.tempFilePath,
              fileType: 'pdf',
              showMenu: true
            })
          }
        }
      })
    },

    shareFile() {
      uni.downloadFile({
        url: this.result.url,
        success: (res) => {
          if (res.statusCode === 200) {
            uni.shareFileMessage({
              filePath: res.tempFilePath,
              success: () => {
                console.log('ھۆججەت يوللاندى')
              }
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.upload-box {
  border: 2px dashed $uni-border-color;
  padding: 60rpx;
  flex-direction: column;

  .upload-icon {
    width: 80rpx;
    height: 80rpx;
  }

  .upload-text {
    font-size: 32rpx;
    color: #666;
  }

  .supported-formats {
    font-size: 24rpx;
    color: #999;
    margin-top: 20rpx;
  }
}

.selected-file {
  .file-icon {
    width: 60rpx;
    height: 60rpx;
  }

  .btn {
    font-size: 24rpx;
    color: #fff;
    width: 128rpx;
    border-radius: 12rpx;
    padding: 0;
    margin: 0;

    &.delete {
      background: #ff3b30;
    }
  }
}

.result-card {
  margin-top: 30rpx;
  border-radius: 20rpx;
  background: #ffffff;
  overflow: hidden;
  margin-bottom: 180rpx;

  .result-header {
    background: $uni-color-success;
    padding: 20rpx;
  }

  .result-content {
    padding: 30rpx;

    .result-item {
      margin-bottom: 20rpx;
    }

    .action-btn {
      flex: 1;
      height: 80rpx;
      font-size: 28rpx;

      &.preview {
        background: $uni-color-primary;
      }

      &.share {
        background: $uni-color-warning;
      }

      &.download {
        background: $uni-color-success;
      }
    }
  }
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);

  .submit-btn {
    width: 100%;
    height: 90rpx;
    background: linear-gradient(to right, #34c759, #30d158);
    color: #fff;
    font-size: 32rpx;
    border-radius: 46rpx;

    &[disabled] {
      background: linear-gradient(to right, #ccc, #ddd);
    }
  }
}
</style>
